<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>FAQ - 懂球帝</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="faq.css">

</head>

<body>
    <div class="faq_head">
        <!--<div class="container">
            <div class="left">left</div>
            <div class="right">right</div>
        </div>-->

    </div>
    </div>
        <div class="faq_container">
            <div class="left">
                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                    <div class="panel-heading can_select" role="tab" id="headingOne">
                        <h4 class="panel-title" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true"
                            aria-controls="collapseOne">
                            Collapsible Group Item #1
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                        <ul class="list-group">
                            <li class="list-group-item"><a name="a">aaaaaaaaaaa</a></li>
                            <li class="list-group-item"><a name="b">bbbbbb</a></li>
                            <li class="list-group-item"><a name="c">ccccc</a></li>
                            <li class="list-group-item"><a name="d">ddddd</a></li>

                        </ul>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading can_select" role="tab" id="headingTwo">
                        <h4 class="panel-title" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true"
                            aria-controls="collapseTwo">
                            Collapsible Group Item #2
                        </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                        <ul class="list-group">
                            <li class="list-group-item">Cras justo odio</li>
                            <li class="list-group-item">Dapibus ac facilisis in</li>
                            <li class="list-group-item">Morbi leo risus</li>
                            <li class="list-group-item">Porta ac consectetur ac</li>
                            <li class="list-group-item">Vestibulum at eros</li>
                        </ul>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading can_select" role="tab" id="headingThree">
                        <h4 class="panel-title" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true"
                            aria-controls="collapseThree">
                            Collapsible Group Item #3
                        </h4>
                    </div>
                    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                        <ul class="list-group">
                            <li class="list-group-item">Cras justo odio</li>
                            <li class="list-group-item">Dapibus ac facilisis in</li>
                            <li class="list-group-item">Morbi leo risus</li>
                            <li class="list-group-item">Porta ac consectetur ac</li>
                            <li class="list-group-item">Vestibulum at eros</li>
                        </ul>
                    </div>
                </div>
            </div>
            </div>
            <div class="right"> 
                <div class="well" id="a">
                11111111111111111111111111
            </div>
            <div class="well" id="b">
                222222222222222
            </div>
            <div class="well" id="c">
                333333333333333
            </div>
            <div class="well" id="d">
                444444444444
            </div></div>
        </div>

<!--
    <div class="faq_content">
        <div class="left_20">
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingOne">
                        <h4 class="panel-title" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true"
                            aria-controls="collapseOne">
                            Collapsible Group Item #1
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                        <ul class="list-group">
                            <li class="list-group-item"><a name="a">aaaaaaaaaaa</a></li>
                            <li class="list-group-item"><a name="b">bbbbbb</a></li>
                            <li class="list-group-item"><a name="c">ccccc</a></li>
                            <li class="list-group-item"><a name="d">ddddd</a></li>

                        </ul>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingTwo">
                        <h4 class="panel-title" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true"
                            aria-controls="collapseTwo">
                            Collapsible Group Item #2
                        </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                        <ul class="list-group">
                            <li class="list-group-item">Cras justo odio</li>
                            <li class="list-group-item">Dapibus ac facilisis in</li>
                            <li class="list-group-item">Morbi leo risus</li>
                            <li class="list-group-item">Porta ac consectetur ac</li>
                            <li class="list-group-item">Vestibulum at eros</li>
                        </ul>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingThree">
                        <h4 class="panel-title" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true"
                            aria-controls="collapseThree">
                            Collapsible Group Item #3
                        </h4>
                    </div>
                    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                        <ul class="list-group">
                            <li class="list-group-item">Cras justo odio</li>
                            <li class="list-group-item">Dapibus ac facilisis in</li>
                            <li class="list-group-item">Morbi leo risus</li>
                            <li class="list-group-item">Porta ac consectetur ac</li>
                            <li class="list-group-item">Vestibulum at eros</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="right_80">
            <div class="well" id="a">
                11111111111111111111111111
            </div>
            <div class="well" id="b">
                222222222222222
            </div>
            <div class="well" id="c">
                333333333333333
            </div>
            <div class="well" id="d">
                444444444444
            </div>
        </div>
    </div>-->

</body>
<script src="jquery-3.1.1.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.min.js"></script>
<script>
    $('.right').children().hide();
    $('#a').show();

    $(".left").find('li').on('click', function () {
        $(".left").find('li').removeClass("act")
        $(this).addClass("act")
        $('.right').children().hide();
        $('#' + $(this).children('a').prop('name')).show();
    });



</script>

</html>